<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin="anonymous"
        integrity="sha512-WNLxfP/8cVYL9sj8Jnp6et0BkubLP31jhTG9vhL/F5uEZmg5wEzKoXp1kJslzPQWwPT1eyMiSxlKCgzHLOTOTQ=="
        src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
</head>

<body>
    <form id="myform">
        <input type="text" name="name1">
        <input type="text" name="name2">
        <input type="text" name="name3">
        <p>喜欢的水果：<select name="advType">
                <option value="1">菠萝</option>
                <option value="2">苹果</option>
                <option value="3">榴莲</option>
                <option value="4">鸭梨</option>
            </select></p>
        <button type="submit">提交</button>
    </form>
    <script>
        $(function () {
            $('#myform').submit(function (e) {
                // e.stopPropagation();
                // e.preventDefault();
                var myform = document.querySelector('#myform')
                var fd = new FormData(myform);
                // 增加键、值
                fd.append('username', 'Chris111');
                fd.append('username', 'Chris222');
                // 获取键的值
                // get 获取增加的第一个值
                // getAll 数组形式获取增加的所有值
                console.log(fd.get('username'));
                console.log(fd.getAll('username'));
            
                let serialize = $('#myform').serialize()
                $.ajax({
                    type: 'post',
                    url: 'http://www.liulongbin.top:3006/api/addbook',
                    data: fd,
                    processData: false,  //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
                    contentType: false,  // https://segmentfault.com/a/1190000007207128(contentType详解)
                    // contentType 的作用为 设置参数传输的格式
                    // application/x-www-form-urlencoded  键值对
                    // multipart/form-data      上传文件
                    // application/json         json格式传输
                    // text/xml                 XML格式
                    success(res) {
                        console.log('在network中查看参数');
                    }
                })
                $.ajax({
                    type: 'post',
                    url: 'http://www.liulongbin.top:3006/api/addbook',
                    data: serialize,
                    success(res) {
                        console.log('在network中查看参数');
                    }
                })
                return false
            })
        })

    </script>
</body>

</html>